<template>
  <div class="cen-1">
    <!--左-->
    <left :carouselData="carouselData"></left>
    <!--中-->
    <centre @handleClick="handleClick"></centre>
    <!--右-->
    <right></right>
  </div>
</template>

<script lang="ts" setup>
import left from './components/center/left.vue'
import centre from './components/center/centre.vue'
import right from './components/center/right.vue'
import type { additionalProperties1 } from '@/services/types/Applic'
import { getApps } from '@/services/Application'
import { ElMessage } from 'element-plus'
import imgs from '@/assets/head/add.png'
type ying = {
  category?: string
  name?: string
  theme?: string
}
const obj = ref<ying>({
  category: '',
  name: '',
  theme: ''
})
const list = ref<additionalProperties1>([])
const list1 = ref<additionalProperties1>([])
const arr = async (obj: any) => {
  const res = await getApps(obj)
  if (Number(res.code) !== 200) {
    ElMessage.error('获取数据失败')
    return
  }
  list.value = res.data
  list1.value = res.data
  console.log(res)
}

const pageSize = 10

const carouselData = computed(() => {
  let pages = []
  for (let i = 0; i < list.value.length; i += pageSize) {
    pages.push(list.value.slice(i, i + pageSize))
  }
  return pages
})
const pageSizes = 18
const carouselDatas = computed(() => {
  let pages = []
  for (let i = 0; i < list1.value.length; i += pageSizes) {
    pages.push(list1.value.slice(i, i + pageSizes))
  }
  return pages
})

provide('carouselDatas', carouselDatas)
const handleClick = async (item: any) => {
  if (item.props.name === 'second') {
    list1.value = list.value.filter((i: any) => i.isRecommend === '1')
  } else if (item.props.name === 'first') {
    list1.value = list.value
  } else if (item.props.name === 'third') {
    list1.value = list.value.filter((i: any) => i.isCollection === '1')
    list1.value.push({
      name: '添加收藏',
      appIp: '',
      category: 0,
      categoryName: '',
      collectionNum: '',
      dwh: '',
      dwmc: '',
      evaluationNum: '',
      evaluationScore: '',
      icon: imgs,
      id: 0,
      isCollection: '',
      isEvaluation: '',
      letterNav: '',
      onlineTime: '',
      pinyinStr: '',
      tag: '',
      text: '',
      theme: 0,
      themeName: '',
      url: ''
    })
  } else {
    list1.value = list.value
  }
}

onMounted(() => {
  arr(obj.value)
})
</script>

<style lang="scss" scoped>
.cen-1 {
  height: 400px;
  //background: #0f33d4;
  box-sizing: border-box;
  padding: 10px 0;
  display: flex;
}
</style>
